<template>
  <el-dialog title="题目预览" :visible.sync="outerVisible" width="60%" :data="perviewList">
      <el-descriptions :column="4">
        <el-descriptions-item label="【题型】"
          >{{perviewList.questionType == '1' ? '单选' :perviewList.questionType == '2' ? '多选' :'简答'}}</el-descriptions-item
        >
        <el-descriptions-item label="【编号】"
          >{{perviewList.id}}</el-descriptions-item
        >
        <el-descriptions-item label="【难度】">
          {{perviewList.difficulty == '1' ? '简单' :perviewList.difficulty == '2' ? '一般' :'困难'}}
        </el-descriptions-item>
        <el-descriptions-item label="【标签】">{{perviewList.tags}}</el-descriptions-item>
        <el-descriptions-item label="【学科】">{{perviewList.subjectName}}</el-descriptions-item>
        <el-descriptions-item label="【目录】">{{perviewList.directoryName}}</el-descriptions-item>
        <el-descriptions-item label="【方向】">{{perviewList.direction}}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <!-- 题干部分 -->
      <el-row>
        <el-col>
          <span>【题干】：</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="color: blue">
          <div v-html="perviewList.question"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>
            <span v-if="perviewList.questionType === '1'">单选题</span>
            <span v-else-if="perviewList.questionType === '2'">多选题</span>
            <span v-else>简答题</span>选项：（以下选中的选项为正确答案）
          </span>
        </el-col>
      </el-row>
      <!-- 单选框 -->
      <el-radio-group v-model="radio" v-if="perviewList.questionType === '1'" @change="handelChange">
        <el-row v-for="(item, index) in perviewList.options" :key="index" style="margin:10px 0px">
          <el-radio :label="item.isRight">{{ item.title }}</el-radio>
        </el-row>
      </el-radio-group>
      <!-- 多选 -->
      <div v-if="perviewList.questionType === '2'">
        <el-row v-for="(item, index) in perviewList.options" :key="index" style="margin:10px 0px">
          <el-checkbox v-model="item.isRight" :disabled="item.isRight === 0" @change="testChange(item)"> {{ item.title }} </el-checkbox>
        </el-row>
      </div>
      <el-divider></el-divider>
      <el-descriptions>
        <el-descriptions-item label="【参考答案】">
          <el-button type="danger" size="mini">视频答案预览</el-button>
      <el-row style="margin-top:20px;" v-if="isVideoShow">
        <video :src="perviewList.videoURL" controls="controls" class="video"></video>
      </el-row>
        </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-descriptions>
        <el-descriptions-item label="【答案解析】"> <div v-html="perviewList.answer"></div> </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-descriptions>
        <el-descriptions-item label="【题目备注】"> {{perviewList.remarks}}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="$emit('update:outerVisible',false)">关闭</el-button>
      </span>
    </el-dialog>
</template>

<script>
export default {
  props: {
    perviewList: {
      type: Object,
      required: true
    },
    outerVisible: {
      type: Boolean,
      required: true,
      default: false
    }
    // SaveDialogVisible: {
    //   type: Boolean,
    //   required: true
    // }
  },
  data () {
    return {
      isVideoShow: false,
      radio: 1
    }
  },
  methods: {
    handelChange () {
      this.$emit('handelChange')
    },
    testChange (item) {
      this.$emit('testChange', item)
    },
    SaveDialogVisible () {
      this.$emit('saveDialogVisible')
    }
  }
}
</script>

<style scoped lang='scss'></style>
